import React, { useEffect, useState } from 'react'
import style from './style.less'
// import img from '@/images/supply/turnip.png'
import { Button, Ellipsis, NoticeBar } from 'antd-mobile'
import { ClockCircleOutline, ExclamationCircleOutline } from 'antd-mobile-icons'
interface TemGoodsDto {
    id: string,
    name: string,
    createTime: string,
    shopping: string,
    shipmentPlace: string,
    originPlace: string,
    minPrice: string,
    maxPrice: string,
    picture: string,
    amount: string,
    description: string,
}
type Props = {
    status?: boolean;
    statuss?:boolean;
    statusss?:boolean;
}
export default (props: Props) => {
    const { status,statuss,statusss} = props
    const [goodsList, setGoodsList] = useState<TemGoodsDto[]>([])
    const temGoodsList = [
        {
            id: '1',
            createTime: '2022-04-28',
            shopping: '四季化肥批发',
            name: '白萝卜批发价格 自家基地优质萝卜 自营基地优质白萝卜的好萝卜好地道',
            shipmentPlace: '重庆市巴南区',
            originPlace: '新疆巴音郭楞蒙古自治州',
            minPrice: '0.15',
            maxPrice: '0.20',
            // picture: img,
            amount: '1000',
            description: '自然，绿色健康营养自然，绿色健康营发动机刷卡机',
        },
        {
            id: '2',
            createTime: '2023-01-28',
            shopping: '四季化肥批发',
            name: '青叶莴笋 现挖莴笋新鲜蔬菜',
            shipmentPlace: '重庆市巴南区',
            originPlace: '新疆巴音郭楞蒙古自治州',
            minPrice: '0.75',
            maxPrice: '0.50',
            // picture: img,
            amount: '3000',
            description: '范德萨的我德尔维奇奥特卫强热饭，绿色健康营发动机刷卡机',
        },
        {
            id: '3',
            createTime: '2021-01-28',
            shopping: '四季化肥批发',
            name: '青叶莴笋 现挖莴笋新鲜蔬菜',
            shipmentPlace: '重庆市巴南区',
            originPlace: '新疆巴音郭楞蒙古自治州',
            minPrice: '0.95',
            maxPrice: '0.50',
            // picture: img,
            amount: '4000',
            description: '结构加工费就叫人家人哦减肥我忘记付款了的加快了的我卡机',
        }
    ]
    const [contents, setContents] = useState()
    const content = '适用于当前页面内信息的通知，是一种较醒目的页面内通知方式'
    useEffect(() => {
        setGoodsList(temGoodsList)
        setContents(content)
    }, [])
    return (
        <div className={style.page}>

            {goodsList.map((item) => (
                <div
                    key={item.id}
                    className={style['list-item']}
                >
                    {statusss ? (
                        <NoticeBar
                            icon={<ExclamationCircleOutline />}
                            content={'驳回原因：' + contents}
                            wrap
                            color='alert'
                        />
                    ) : null}

                    <div className={style.con}>
                        {/* <div className={style['con-left']}>
                            {item?.picture ? (
                                <img src={item?.picture} alt="商品图片" />
                            ) : null}
                        </div> */}
                        <div className={style['con-right']}>
                            <div className={style.name}>
                                <span className={style.sign}>白萝卜</span>
                                <Ellipsis direction='end' content={item?.name} rows={2} />
                            </div>
                        </div>

                    </div>
                    <div className={style['con-bottom']}>
                        <div className={style.money}>
                            价格
                            <span className={style.price}>{item?.minPrice}-{item?.maxPrice}/斤</span>
                        </div>
                        <div className={style.money}>
                            数量
                            <span className={style.price}>{item.amount}斤</span>
                        </div>
                    </div>
                    <div className={style.description}>
                        <div className={style['con-title']}>
                            <span className={style['con-title-a']}>产地</span>
                            <span className={style['con-title-b']}>{item?.shipmentPlace}</span>
                        </div>
                        <div className={style['con-title']}>
                            <span className={style['con-title-a']}>发货地</span>
                            <span className={style['con-title-b']}>{item?.originPlace}</span>
                        </div>
                        <div className={style['con-title']}>
                            <span className={style['con-title-a']}>商品描述</span>
                            <span className={style['con-title-b']}>
                                <Ellipsis
                                    direction='end'
                                    content={item?.description}
                                    expandText='查看全部'
                                    collapseText='收起'
                                    style={{ color: '#5D7093' }}
                                />

                            </span>
                        </div>
                    </div>
                    <div className={style.bottom}>
                        <div className={style['bottom-left']}>
                            <ClockCircleOutline />
                            <span>{item?.createTime}</span>
                        </div>
                        <div className={style['bottom-right']}>
                         {statuss? ( <Button
                            fill='outline'
                            size='small'
                        >
                            取消发布
                        </Button>):null}
                        {status ? (
                            <Button
                                fill='outline'
                                size='small'
                                color='success'
                            >
                                编辑
                            </Button>
                        ) : null}
                        </div>
                    </div>
                </div>
            ))}

        </div>
    )
}
